import React, { useEffect } from 'react';
import { MyCarouselProps } from '../types';
import './index.css';
import Swiper from 'swiper/bundle';
import styled from './myCarousel.module.css';
export default function MyCarousel({ banners }: MyCarouselProps) {
    useEffect(() => {
        setTimeout(() => {
            new Swiper('.mySwiper', {
                slidesPerView: 'auto',
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        }, 300);
    }, []);
    return (
        <div className={styled.swiper}>
            <div className={['swiper', 'mySwiper'].join(' ')}>
                <div className="swiper-wrapper">
                    {banners.map((item, index) => {
                        return (
                            <div
                                className={[
                                    'swiper-slide',
                                    styled.cus_slide,
                                    styled.swiper_slide,
                                ].join(' ')}
                                key={index}
                            >
                                <img src={'https://' + item.media.file} alt="" />
                            </div>
                        );
                    })}
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </div>
    );
}
